<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .current{
            background-color:purple;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div></div>
    <ul>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function(){
          //单个事件注册
            //语法  element.事件(function(){})  
            // $("div").click(function(){
            //     $(this).css("backgroundColor","red");
            // })

            //2.事件处理 on()  在匹配元素上绑定一个或多个事件的处理函数
            //语法：  element.on(events,[selector],fn)
            /* 
            1.event:一个或多个用空格分隔的事件类型，如 click或keyDown
            2.selector：元素的子类选择器
            */
            // $("div").on({
            //     click : function(){
            //         $(this).css("backgroundColor","red");
            //     },
            //     mouseenter:function(){
            //         $(this).css("backgroundColor","blue");
            //     }
            // })
            $("div").on("mouseenter mouseleave",function(){
                $(this).toggleClass("current");
            })

            // (2)on可以实现事件委派
            $("ul").on("click","li",function(){
                alert(111);
            });

            // 3.on()方法 给动态创建元素添加绑定事件
            $("ol").on("click","li",function(){
                alert(222);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

        })
        
    </script>
</body>
</html>